<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>登录</title>
	<script th:src="@{/user/js/jquery.min.js}"></script>
	<script th:src="@{/user/js/common.js}"></script>
	<!--背景图片自动更换-->
	<script th:src="@{/user/js/supersized.3.2.7.min.js}"></script>
	<script th:src="@{/user/js/supersized-init.js}"></script>
	<!--表单验证-->
	<script th:src="@{/user/js/jquery.validate.min.js}"></script>
<link rel="stylesheet" th:href="@{/user/css/style.css}">
</head>
<body>

<div class="login-container">
	<h1>登录</h1>
	<span>[[${msg}]]</span>
	<form th:action="@{/user/login}" method="post" id="loginForm">
		<div>
			<input type="text" name="userEmail" class="username" placeholder="邮箱" autocomplete="off"/>
		</div>
		<div>
			<input type="password" name="userPwd" class="password" placeholder="密码" oncontextmenu="return false" onpaste="return false" />
		</div>
		<div>
			<input type="text" name="code" class="password" placeholder="验证码"  />
			<button type="button" id="email_code">获取验证码</button>
		</div>
		<button type="submit">登 陆</button>
	</form>

	<a th:href="@{/user/toReg}">
		<button type="button" class="register-tis">还有没有账号？</button>
	</a>

</div>

<script type="text/javascript">
	<!--		按钮前要加# $表示jquery这个对象 -->
	$("#email_code").click(function () {
		let val = $("[name='userEmail']").val();
		alert(val)
        $.ajax({
            url:"/user/sendMsg",
            method:"post",
            data:{
				"userEmail":val
            },
            success:function (data) {
                if (data.state==200){
                    alert(data.message)
                }else{
                    alert("fail")
                }
            }

        })
	});
</script>



</body>
</html>